import {
  CommonEventFunction,
  Picker,
  PickerSelectorProps,
  View
} from '@tarojs/components'
import {useEffect, useState} from 'react'

type MinuteTimeInterval = [
  5,
  6,
  7,
  8,
  9,
  10,
  11,
  12,
  13,
  14,
  15,
  16,
  17,
  18,
  19,
  20,
  21,
  22,
  23,
  24,
  25,
  26,
  27,
  28,
  29,
  30,
  31,
  32,
  33,
  34,
  35,
  36,
  37,
  38,
  39,
  40,
  41,
  42,
  43,
  45,
  46,
  47,
  48,
  49,
  50,
  51,
  52,
  53,
  54,
  55,
  56,
  57,
  58,
  59,
  60
]
type HourTimeInterval = [
  1,
  2,
  3,
  4,
  5,
  6,
  7,
  8,
  9,
  10,
  11,
  12,
  13,
  14,
  15,
  16,
  17,
  18,
  19,
  20,
  21,
  22,
  23,
  24
]
type TimeInterval = MinuteTimeInterval | HourTimeInterval
const minuteInterval: MinuteTimeInterval = [
  5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25,
  26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 45,
  46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60
]
const hourInterval: HourTimeInterval = [
  1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
  23, 24
]

type TimeUnit = 'minute' | 'hour'
type TimeUnitCn = '分钟' | '小时'

enum TimeUnitEnum {
  minute = '分钟',
  hour = '小时'
}

const TimeIntervalPicker: React.FC<{
  onChange: (data: {timeInterval: number; timeUnit: TimeUnit}) => void
  defaultTimeInterval?: number
}> = ({onChange, defaultTimeInterval}): JSX.Element => {
  //间隔时间选择范围
  const [timeIntervalRange, setTimeIntervalRange] =
    useState<TimeInterval>(minuteInterval)
  // 间隔时间已选择的下标
  const [timeIntervalRangeValue, setTimeIntervalRangeValue] = useState<
    number | undefined
  >(0)
  // 间隔事件Picker选择变化
  const handleTimeIntervalPickerChange: CommonEventFunction<
    PickerSelectorProps.ChangeEventDetail
  > = e => {
    let val = Number(e.detail.value)
    console.log(val)
    setTimeIntervalRangeValue(val)

    val !== undefined &&
      timeUnitRangeValue !== undefined &&
      onChange({
        timeInterval: timeIntervalRange[val],
        timeUnit: timeUnitRange[timeUnitRangeValue].value
      })
  }

  // 间隔时间单位
  const [timeUnitRange, _setTimeUnitRange] = useState<
    {label: TimeUnitCn; value: TimeUnit}[]
  >([{label: '分钟', value: 'minute'}])
  // 间隔时间已选择的下标
  const [timeUnitRangeValue, setTimeUnitRangeValue] = useState<
    number | undefined
  >(0)
  // 间隔事件单位Picker选择变化
  const handleTimeUnitPickerChange: CommonEventFunction<
    PickerSelectorProps.ChangeEventDetail
  > = e => {
    let val = Number(e.detail.value)

    switch (val) {
      case 0:
        setTimeIntervalRange(minuteInterval)
        break
      case 1:
        setTimeIntervalRange(hourInterval)
        break
    }

    setTimeIntervalRangeValue(0)
    setTimeUnitRangeValue(val)

    timeIntervalRangeValue !== undefined &&
      val !== undefined &&
      onChange({
        timeInterval: timeIntervalRange[timeIntervalRangeValue],
        timeUnit: timeUnitRange[val].value
      })
  }

  useEffect(() => {
    console.log(defaultTimeInterval)
    let index = timeIntervalRange.findIndex(item => item == defaultTimeInterval)
    console.log(index, '默认index')

    index !== -1 && setTimeIntervalRangeValue(index)
  }, [defaultTimeInterval])

  return (
    <View className="flex items-center gap-x-16">
      <Picker
        className="flex-1 h-42 bg-white rounded-4 flex items-center justify-center"
        range={timeIntervalRange}
        value={timeIntervalRangeValue}
        onChange={handleTimeIntervalPickerChange}
      >
        <View className="w-full h-full text-14 text-black">
          {timeIntervalRangeValue !== undefined
            ? timeIntervalRange[timeIntervalRangeValue]
            : '选择间隔时间'}
        </View>
      </Picker>
      <Picker
        className="flex-1 h-42 bg-white rounded-4 flex items-center justify-center"
        range={timeUnitRange}
        value={timeUnitRangeValue}
        rangeKey={'label'}
        onChange={handleTimeUnitPickerChange}
      >
        <View className="w-full h-full text-14 text-black flex items-center justify-center">
          {timeUnitRangeValue !== undefined
            ? timeUnitRange[timeUnitRangeValue].label
            : '选择时间单位'}
        </View>
      </Picker>
      <View className="text-14 text-xx_text">一次</View>
    </View>
  )
}

export default TimeIntervalPicker
